{% macro component(config, localized) %}
    {% set config = {
        cssClasses: [],
        errorMessage: '',
        errorText: localized.status.error,
        okText: localized.status.ok,
        status: false,
    } | merge(config)
    %}

    {% if config.cssClasses is not empty %}
        {% set cssClasses = config.cssClasses %}
    {% else %}
        {% set cssClasses = ['bc-items-center'] %}
    {% endif %}

    <div class="bc-flex {{ cssClasses | join(' ') }} bc-space-x-2 ">
        {% if config.status == true %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="bc-w-5 bc-h-5 bc-inline-block bc-text-green-600 bc-flex-shrink-0">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
            </svg>
        {% else %}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="bc-w-5 bc-h-5 bc-inline-block bc-text-red-600 bc-flex-shrink-0">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
            </svg>
        {% endif %}
        <div>
            <p class="bc-break-words bc-text-sm">
                {% if config.status == true %}
                    {{ config.okText | raw }}
                {% else %}
                    {{ config.errorText | raw }}
                {% endif %}
            </p>
        </div>
    </div>
    {% if config.status != true %}
        <p class="bc-text-xxs bc-pt-1">
            {{ config.errorMessage | raw }}
        </p>
    {% endif %}
{% endmacro %}
